<template>
  <div id="student-management" class="container">
    <table-filter>
        <el-input
                placeholder="请输入学生账号"
                clearable
                v-model="apiSetting.data.stuCode"
        ></el-input>
        <el-input
                placeholder="请输入学生姓名"
                clearable
                v-model="apiSetting.data.stuName"
        ></el-input>
      <school-dept-class-selection
          show-class
          show-dept
          show-school
          :school-code.sync="apiSetting.data.schoolCode"
          :dept-code.sync="apiSetting.data.deptCode"
          :class-code.sync="apiSetting.data.classCode">
      </school-dept-class-selection>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true">添加学生</el-button>
      <el-button plain type="primary" @click="importDialog = true">批量导入</el-button>
      <el-button plain type="primary" @click="delRow(`/sys/student/deleteUser/${ids}`, '学生')">批量删除</el-button>
      <el-button plain type="primary" @click="exportStu()">导出学生</el-button>
    </el-row>
    <data-table
        ref="dtb"
        :sort-column="sortColumn"
        :api-setting="apiSetting"
        pagination
        @selection-change="onQueSelected"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!--<el-table-column
        fixed
        prop="userid"
        label="UserId"
        sortable
        show-overflow-tooltip
      />-->
      <el-table-column prop="usercode" label="账号" show-overflow-tooltip/>
      <el-table-column prop="username" label="姓名" show-overflow-tooltip/>
      <el-table-column
          prop="classname"
          label="班级名称"
          show-overflow-tooltip
      />
      <el-table-column
          prop="createtime"
          label="创建时间"
          show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
          prop="createperson"
          label="创建人"
          show-overflow-tooltip
      />
      <el-table-column label="状态" width="150">
        <template slot-scope="{ row }">
          <el-switch
              v-model="row.isenable"
              :active-value="true"
              :inactive-value="false"
              @change="setUserStatus($event, row)"
              active-text="启用"
              inactive-text="禁用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{ row }">
          <el-button class="warning" @click="edit(row)" type="text" size="small"
          >编辑
          </el-button>
          <el-button @click="reset(row)" type="text" size="small"
          >重置密码
          </el-button>
          <el-button
              class="danger"
              @click="delRow(`/sys/student/deleteUser/${row.userid}`, '学生')"
              type="text"
              size="small"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-user
        ref="eaDialog"
        module-name="学生"
        upload-api="/api/sys/student/avatarUpload"
        submit-api="/sys/student/addOrUpdate"
        :show.sync="showEaDialog"
        @on-reload="dtb.loadData()"
    />
    <import-file
        upload-api="/api/sys/student/uploadStu"
        template-url="/sys/student/downloadTemplate"
        template-file-name="学生模板.xlsx"
        @on-reload="dtb.loadData()"
        title="导入学生"
        :show.sync="importDialog"
    />
  </div>
</template>

<script>
import dtb from "../../../mixins/refs/dtb";
import eaDialog from "../../../mixins/refs/eaDialog";
import deleteRow from "@/mixins/dataTable/deleteRow";
import ImportFile from "@/views/component/ImportFile";
import EaUser from "@/views/component/EaUser";
import user from "@/mixins/business/user";
import {mapGetters} from "vuex";
import tbSearch from "@/mixins/dataTable/tbSearch";
import SchoolDeptClassSelection from "@/views/component/SchoolDeptClassSelection"

export default {
  name: "index",
  components: {SchoolDeptClassSelection, EaUser, ImportFile},
  mixins: [tbSearch, user, dtb, eaDialog, deleteRow],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/student/getStuList",
        data: {
          classCode: "",
          schoolCode: "",
          deptCode: "",
          stuName: "",
          stuCode: ""
        }
      },
      sortColumn: ["userid", "username", "classname"],
      apis: {
        resetPwd: "/sys/student/resetPwd",
        setUserStatus: "/sys/student/enableUser",
        userDetail: "/sys/student/getStuDetail"
      },
      importDialog: false,
      ids: []
    };
  },
  methods: {
    ...mapGetters(["getUserSchoolCode"]),
    onQueSelected(n) {
      this.ids = []
      n.forEach((item) => {
        this.ids.push(item.userid)
      })
    },
    exportStu(){
      const { classCode, schoolCode, deptCode, stuName } = this.apiSetting.data;
      this.downLoadFile(
              {
                method: "post",
                url: "/sys/student/exportStuExcel",
                data: {
                  cols: [
                    "usercode",
                    "username",
                    "classname",
                    "deptname",
                    "schoolname"
                  ],
                  classCode,
                  schoolCode,
                  deptCode,
                  stuName
                }
              },
              "学生记录.xls"
      );
    }
  }
};
</script>

<style scoped></style>
